<template>
  <div class="home">
    <!-- 联系人列表 -->
      <van-contact-list
      :list="list"
      @add="onAdd"
      @edit="onEdit"
     
     />
    <!-- 编辑联系人 -->
    <van-popup v-model="showEdit"
      position="bottom"
    />
    <van-contact-edit
    :contact-info="editingContact"
    :is-edit="isEdit"
    @save="onSave"
    @delete="onDelete"
    />
  </div>
</template>

<script>
//vant
// import { Button } from 'vant';
import axios from 'axios'
import { ContactList ,Toast ,ContactEdit,Popup } from 'vant';
export default {
  name: 'axios-contactList',
  components:{
    [ContactList.name]:ContactList,
    [ContactEdit.name]:ContactEdit,
    [Popup.name]:Popup,
    //[Toast.name]:Toast
  },
  data(){
    return {
      instance : null,
      list:[
        {
          id:1,
          name:'',
          tel:''
        }
      ],
      showEdit:false,
      editingContact:{},//正在编辑人
      isEdit:false
    }
  },
  methods:{

    async getlist(){
        let res = await this.$Http.getContactList()
        this.list = res.data
    },
    
    //添加联系人
    onAdd(){
      this.showEdit =true
      this.isEdit = false
    },
    //修改联系人
    onEdit(info){
        this.showEdit =true
        this.isEdit = true
        this.editingContact = info
    },
    onSave(info){
      if(this.isEdit){
        //修改
      }else{
        //新增
        this.instance.post('/contact/new/json',info)
        .then(res=>{
          if(res.data.code==200){
            Toast('新建成功')
          }
          this.showEdit =false
        }).catch(err=>{
          console.log('加载失败'+err.data)
          Toast('请求失败，请稍候')
        })
      }
     
    },
    onDelete(){

    }
  },
  created(){
    //创建实例
    this.instance = axios.create({
    baseURL:' http://localhost:9000/api',//基本地址
      })

    //获取列表
     this.getlist();
    // this.instance.get('/contactList')
    // .then(res=>{
    //   this.list=res.data.data;
    // })
    // .catch(err=>{
    //   console.log('加载失败'+err.data)
    //   Toast('请求失败，请稍候')
    // })

  }
}
</script>
<style scoped>
.van-contact-list__add{
  z-index: 0;
}
/* .van-popup{
  height: 100%;
} */
</style>